

<template>
  <div class="container">
    <div class='form'>
      <div class="form-types" v-for="(list, key) in formList" :key="key">
        <h2 class="title clearfix">{{ list.title }}</h2>
        <div class="input-field clearfix" v-for="(item, index) in list.list" :key="index">
          <p class="tips" v-if="item.placeholder || item.label">
            <i :class="`iconfont icon-${item.icon}`"></i>
            <span class="label">{{ item.name }}</span>
          </p>
          <van-field v-if="item.placeholder"
            class="scale-1px-hairline--bttom clearfix"
            readonly
            :type="item.isTextarea ? 'textarea' : 'text' "
            :autosize="!!item.isTextarea"
            v-model="item.label"
            :placeholder="item.placeholder"
            @click="jumpEditInfo(item)"
            >
            <van-icon @click="jumpEditInfo(item)"
              name='arrow'
              size='16'
              color='#CBCFD4'
              slot='right-icon'
            />
          </van-field>
          <div v-else-if="item.label" style="display: block;" class="van-cell scale-1px-hairline--bttom clearfix">
            <span class="item-tag" v-for="(self, index) in item.label" :key="index">{{ self }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="isPickerShow"
      position="bottom"
    >
      <van-picker
        show-toolbar
        :title="title"
        :default-index="defaultIndex"
        :columns="columns"
        @cancel="isPickerShow = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup
      v-model="isAreaShow"
      position="bottom"
    >
      <van-area
        :value='customerInfo.positionCode'
        :area-list="intentionAreaList"
        title='意向区域'
        @confirm="onConfirm"
        @cancel="isAreaShow = false"
      />
    </van-popup>
    <van-actionsheet
      v-model="isGenderShow"
      :actions="columns"
      cancel-text="取消"
      @select="onConfirm"
    />
  </div>
</template>
<script>
import { fullArea } from '@/utils/fullArea'
import CustomService from 'SERVICE/customService'
import strFormat from '@/filters/strFormat'

const formList = {
  basicInfo: {
    list: [
      { params:'phone',
        label: '',
        func: function(item) {
          if (item.phone) {
            return item.areaCode + " " + item.phone
          }
          return ""
        },
        isClick: true,
        icon:'kehu-shouji',
        name: '手机号',
        placeholder: '输入手机号码',
        value: ''
      },
      { params:'remarkName',
        isClick: true, 
        icon:'kehu-beizhu',
        name: '备注名称',
        placeholder: '请输入备注名称',
        value: ''
      },
      { params:'sex',
        label: '',
        func: function(item) {
          let obj = {
            1: '男',
            2: '女'
          }
          return obj[item.sex] || ''
        },
        isClick: false,
        icon:'kehu-xingbie',
        name: '性别',
        placeholder: '请选择性别',
        options: [{name: "男", value: 1}, { name: "女", value: 2 }],
        value: ''
      },
      { params:'classifyTitle',
        isClick: false,
        icon:'kehu-qunzu', 
        name: '所属分组',
        placeholder: '请选择分组',
        value: ''
      },
      { params:'clientTagList',
        isClick: false,
        icon:'kehuxiangqing-biaoqian', 
        name: '客户标签',
        placeholder: '',
        value: ''
      }
    ],
    title: '客户资料'
  },
  intention: {
    list: [
      { params: 'intentionArea',
        label: '',
        func: function(item) {
          return item.intentionArea.split("/").join("-")
        },
        isClick: false,
        icon:'kehu-yixiangquyu',
        name: '意向区域',
        placeholder: '请选择意向区域',
        value: ''
      },
      { params: 'intentionTotalPrice',
        isClick: false,
        label: '',
        icon:'kehu-jiageyusuan',
        name: '价格预算',
        placeholder: '请选择预算',
        value: '',
        options:[
          { values: ['100万以下' ,'100-200万' ,'200-300万' ,'300-400万' ,'400-500万' ,'500-800万' ,'800-1000万' ,'1000万以上'], defaultIndex: 3 }
        ]},
      {
        params: 'intentionHouseType',
        label: '',
        func: function(item) {
          return item.intentionHouseType.split("/").join("")
        },
        isClick: false,
        icon:'kehu-yixianghuxing',
        name: '意向户型',
        placeholder: '请选择户型',
        value: '',
        options: [
          { values: ['一室', '二室', '三室', '四室', '五室', '五室以上'], defaultIndex: 2 },
          { values: ['一厅', '二厅', '三厅', '四厅', '五厅', '五厅以上'], defaultIndex: 1 }
        ]
      },
      { params: 'intentionDescription',
        isTextarea: true,
        label: '',
        isClick: true,
        icon:'kehu-yixiangmiaoshu',
        name: '其他描述',
        placeholder: '请输入你的其他需求',
        value: ''
      }
    ],
    title: '客户意向'
  }
}

export default {
  data () {
    return {
      formList,
      isPickerShow: false,
      isAreaShow: false,
      isGenderShow: false,
      defaultIndex: 0,
      type: '',
      title: '',
      columns: [],
      intentionAreaList: fullArea,
    }
  },
  props: {
    customerInfo: {
      type: Object
    },
    clientId: {
      type: String
    }
  },
  created() {
    this.modelValue()
  },
  methods: {
    modelValue() {
      Object.values(this.formList).forEach(list => {
        list.list.forEach(item => {
          let type = item.params
          item.value = this.customerInfo[type]
          if (item.func) {
            item.label = item.func(this.customerInfo)
          } else {
            item.label = item.value
          }
        })
      })
      console.log(this.formList)
      this.formList = formList
    },
    /**
     * 编辑信息
     */
    jumpEditInfo (item) {
      if (item.isClick) {
        let type = item.params
        let query = { clientId: this.clientId, type: type, [type]: this.customerInfo[type] }
        if (type === 'phone' ) query.areaCode = this.customerInfo.areaCode
        this.$router.push({ name: 'custom-edit-info', query })
      } else {
        this.sel(item)
      }
    },
    /**
     * 弹出picker
     */
    sel (item) {
      let type = item.params
      this.columns = item.options
      this.type = type
      if (type === 'sex') {
        this.isGenderShow = true
      } else if (type === 'intentionTotalPrice') {
        this.title = '意向总价'
        this.isPickerShow = true
      } else if (type === 'intentionHouseType') {
        this.title = '意向户型'
        this.isPickerShow = true
      } else if(type === 'intentionArea') {
        this.isAreaShow = true
      } else {
        let query = { clientId: this.clientId }
        let classifyId = this.customerInfo.classifyId
        if (classifyId) {
          query.classifyId =  classifyId
        }
        this.$router.push({ name: 'changeGroups', query })
      }
    },
    hidePopup() {
      this.isPickerShow = false
      this.isAreaShow = false
      this.isGenderShow = false
    },
    /**
     * picker confirm
     */
    onConfirm (val, index) {
      let obj = { clientId: this.clientId }
      Object.values(this.formList).forEach(list => {
        list.list.forEach(item => { 
          obj[item.params] = item.value
        })
      })
      let text = ''
      if (val && val.value) {
        text = val.value
      } else if (val.length < 3) {
        text = val.join("/") 
      } else {
        text = val.map(val => val.name).join('/')
      }
      obj[this.type] = text 
      let params = Object.assign(this.customerInfo, obj )
      this.updateCustomerInfo(params)
    },
    /**
    * 更新客户资料信息
    */
    async updateCustomerInfo (params) {
      try {
        await CustomService.updateCustomerInfo(params)
        this.hidePopup()
        await this.$parent.getCustomerInfo(this.clientId)
        this.modelValue()
      } catch (error) {
        console.log(console.error)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.scale-1px-hairline--bottom::after{
  background: #E4E6F0;
}
.container {
  // font-family: PingFangSC-Medium;
  font-size: 14px;
  background: #fff;
  .form {
    .form-types {
      padding: 20px 16px 0 16px;
      .title {
        color: #13284D;
        height: 28px;
        line-height: 28px;
        font-size: 20px;
        font-weight: bold;
      }
    }
    .input-field {
      overflow: hidden;
      .tips {
        color: #9BA4B4;
        line-height: 16px;
        display: flex;
        align-items: center;
        padding-top: 16px;
      }
      
      .label {
        padding-left: 10px;
        font-size: 12px;
      }
    }

    .item-tag {
      padding: 4px 5px;
      font-size: 12px;
      line-height: 12px;
      color: rgba(64, 81, 111, 0.8);
      background: #EEF1F4;;
      border-radius:2px;
      margin-right: 6px;
      margin-bottom: 4px;
      display: inline-block;
    }

    .van-cell {
      padding: 6px 0 11px 0;
      width: calc(100% - 26px);
      margin-left: 26px;
      /deep/ .van-field__control {
        font-weight: bold;
        color: #405170;
        font-size: 16px;
        &::-webkit-input-placeholder {
          font-weight: 400;
          color: #9BA4B4;
        }
      }
    }
  }
  // input::placeholder {
  //   color: #9BA4B4;
  //   font-weight: 400;
  // }
  
}
</style>
